<template>
    <div v-if="abc.userInfo.Id">
        <h1>新增房型</h1>
        {{ abc.str }}
        {{ abc.userInfo }}

        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">房型名称：</td>
                    <td><input type="text" v-model="queryInfo.HouseTypeName" /></td>
                </tr>
                <tr>
                    <td align="right">房型价格：</td>
                    <td><input type="number" v-model="queryInfo.Price" /></td>
                </tr>
                <tr>
                    <td align="right">房型面积：</td>
                    <td><input type="number" v-model="queryInfo.Area" /></td>
                </tr>
                <tr>
                    <td align="right">最多入住人数：</td>
                    <td><input type="number" v-model="queryInfo.Peoples" /></td>
                </tr>
                <tr>
                    <td align="right">房型图片：</td>
                    <td>
                        <input type="file" @change="img" />
                        <img :src="queryInfo.Photo" alt="" width="100px" height="100px" v-if="queryInfo.Photo != ''">
                    </td>
                </tr>
                <tr>
                    <td align="right">房型描述：</td>
                    <td>
                        <textarea cols="50" rows="5" v-model="queryInfo.Desc"></textarea>
                    </td>
                </tr>
                <tr>
                    <td align="right">是否有窗：</td>
                    <td>
                        <input type="radio" name="win" :value="1" v-model="queryInfo.IsWin" checked />是
                        <input type="radio" name="win" :value="0" v-model="queryInfo.IsWin" />否
                    </td>
                </tr>
                <tr>
                    <td align="right"></td>
                    <td>

                        <input type="button" value="增加" class="btn-primary" @click="ok" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div v-else>
        您还没有登录
        <input type="button" value="登录" class="btn btn-info" @click="router.push('/loginView')">
    </div>

</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user'

const route = useRoute();
const router = useRouter();

const abc = useUserStore();

//声明一个变量存储向后端增加的数据
let queryInfo: any = reactive({
    "HouseTypeName": "",
    "Price": '',
    "Area": '',
    "Peoples": '',
    "Photo": "",
    "Desc": "",
    "IsWin": 1,
    "IsDelete": false,
    "CreateTime": new Date(),
    "UpdateTime": new Date()
})

const img = (e: any) => {
    let obj = e.target.files[0];
    let f = new FormData();
    f.append('file', obj)
    axios({
        url: '/api/Img/Imgs',
        method: 'post',
        data: f
    })
        .then(res => {
            console.log(res);
            if (res.data == "不是图片") {
                alert('您上传的不是图片')
                return
            }
            if (res.data == "大于2M") {
                alert('您上传的图片大于2M了')
                return
            }
            queryInfo.Photo = res.data
        })
        .catch(err => {
            console.log(err);

        })
}

const ok = () => {
    if (queryInfo.HouseTypeName == "") {
        alert('房型名称不能为空')
        return
    }
    if (queryInfo.Price == "") {
        alert('房型价格不能为空')
        return
    }
    //价格只能为正数
    let reg = /^[1-9]+(\.[0-9]+)?$/
    if (reg.test(queryInfo.Price) == false) {
        alert('房价只能是正数')
        return;
    }
    if (queryInfo.Area == "") {
        alert('面积不能为空')
        return
    }
    if (queryInfo.Peoples == "") {
        alert('最多入住人数不能为空')
        return
    }
    if (queryInfo.Photo == "") {
        alert('图片不能为空')
        return
    }
    if (queryInfo.Desc == "") {
        alert('房型描述不能为空')
        return
    }
    if (queryInfo.IsWin == "") {
        alert('是否有窗户不能为空')
        return
    }
    axios({
        url: '/api/HouseType/AddHouseType',
        method: 'post',
        data: queryInfo
    })
        .then(res => {
            console.log(res);
            if (res.data == -1) {
                alert('房型名称已存在，请重新输入！')
                return
            }
            if (res.data > 0) {
                alert('添加成功')
                router.push('/houseTypeList')
            }
            else {
                alert('添加失败')
                return
            }
        })
        .catch(err => {
            console.log(err);

        })
}

</script>

<style scoped></style>